<template>
  <div class="strut-div">
    <div class="strut-div"><div :id="config.option.id" class="strut-div"></div></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import autoHover from '../../util/autoHover.js';

export default {
  name: 'CommonLineChart',
  props: ['config'],
  watch: {
    config:{
      handle: function(){
        this.initChart();
      },
      deep: true,
    }
  },
  data() {
    return {
      chart: null,
      timeTicket: null
    };
  },
  methods: {
    initChart() {
      let option = {
        grid: {
          left: 50,
          top: 50,
          right: 30,
          bottom: 35
        },
        tooltip: {
          trigger: 'axis',
          extraCssText:'z-index: 999',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: '' // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          }
          // 						formatter:(params, ticket, callback)=>{
          // 							console.log(params);
          // 							let htmlString = "";
          // 							htmlString = ""
          // 							+ params[0].name
          // 							+ "<br>"
          // 							+ params[0].value + " " + this.config.option.x1.title
          // 							+ "<br>"
          // 							+ params[1].value + " " + this.config.option.x2.title ;
          //
          // 							return htmlString;
          // 						}
        },
        legend: {
          right: 20,
          top:10,
          data: [],
          textStyle: {
            color: '#E9F4FF'
          }
        },
        xAxis: {
          type: 'category',
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0,
            fontSize: 14,
            formatter:function(value) {
              var ret = "";//拼接加\n返回的类目项
              var maxLength = 5;//每项显示文字个数
              var valLength = value.length;//X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1)//如果类目项的文字大于3,
              {
                for (var i = 0; i < rowN; i++) {
                    var temp = "";//每次截取的字符串
                    var start = i * maxLength;//开始截取的位置
                    var end = start + maxLength;//结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                }
                return ret;
              }
              else {
                return value;
              }
            }
          }
        },
        yAxis: [],
        series: [],
        textStyle: {
          color: '#E9F4FF',
          fontSize: 16
        }
      };
      if (this.config.option.axisLabel) {
        option.xAxis.axisLabel.rotate = this.config.option.axisLabel.rotate;
      }

      for (let i = 0; i < this.config.option.y.length; i++) {
        option.series.push({
          type: 'bar',
          color: this.config.option.y[i].color,
          lineStyle: {
            color: this.config.option.y[i].color
          },
          data: [],
          stack: this.config.option.y[i].stack,
          barGap: '10%',
          barMaxWidth: '25',
          animation: true,
          label: {
            normal: {
              show: true,
              position: this.config.option.y[i].position || 'top',
              textShadowColor:'#000',
              textShadowBlur:7,
              textStyle: {
                color: '#E9F4FF'
              }
            }
          }
        });

        if (this.config.option.y[i].axis) {
          var yAxis = {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(10,61,102,0.5)'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              fontSize: 14
            },
            splitNumber: 5
          };
          if (this.config.option.y[i].axis.name) {
            yAxis.name = this.config.option.y[i].axis.name;
          }
          if (this.config.option.y[i].axis.min) {
            yAxis.min = this.config.option.y[i].axis.min;
          }
          if (this.config.option.y[i].axis.max) {
            yAxis.max = this.config.option.y[i].axis.max;
          }

          option.yAxis.push(yAxis);

          option.series[i].yAxisIndex = i;
        }
      }
      // this.$get(this.$api.getDemographicData, null).then(res => {
      //   // console.log(res);
      // });

      setTimeout(() => {
        option.xAxis.data = this.config.option.xAxis;

        for (var i = 0; i < this.config.option.y.length; i++) {
          option.series[i].data = this.config.option.y[i].data;
          option.series[i].name = this.config.option.y[i].title;
          option.legend.data.push(this.config.option.y[i].title);
        }
        console.log('=====');
        console.log(option);
        this.chart.setOption(option);
        this.timeTicket = autoHover.autoHover(this.chart, option, option.xAxis.data.length, 2000);
      }, 300);
    },
    refreshChart() {}
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.config.option.id));
  },
  beforeDestroy() {
    autoHover.stopHover(this.timeTicket);
  }
};
</script>

<style scoped lang="scss" type="text/scss"></style>
